<template>
  <el-steps :active="2" align-center>
    <el-step id="one" title="Step 1" description="Some description" />
    <el-step id="two" title="Step 2" description="Some description" />
    <el-step id="three" title="Step 3" description="Some description" />
    <el-step id="finally" title="Step 4" description="Some description" />
  </el-steps>
</template>

<script setup>
  import IntroJs from "intro.js"; // introjs库
  import "intro.js/introjs.css"; // introjs默认css样式
  import "intro.js/themes/introjs-dark.css"; // introjs主题

  const initPageIntro = () => {
    // 引导图
    const allSteps = [
      {
        element: "#one", //这是添加引导的元素id
        intro: "引导一", //这是引导提示内容
        position: "right", //这是引导位置
      },
      {
        element: "#two",
        intro: "引导二",
        position: "left",
      },
      {
        element: "#three",
        intro: "引导三",
        position: "left",
      },
      {
        element: "#finally",
        intro: "引导结束",
        position: "top",
      },
    ];

    const curIntro = IntroJs();
    curIntro.setOptions({
      prevLabel: `上一步`,
      nextLabel: `下一步`,
      skipLabel: `跳过`,
      doneLabel: `完成`,
      tooltipPosition: `bottom` /* 引导说明框相对高亮说明区域的位置 */,
      hidePrev: `true`, // 隐藏第一步中的上一个按钮
      tooltipClass: `` /* 引导说明文本框的样式 */,
      highlightClass: `` /* 说明高亮区域的样式 */,
      exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
      showStepNumbers: false /* 是否显示说明的数据步骤*/,
      keyboardNavigation: false /* 是否允许键盘来操作 */,
      showButtons: true /* 是否按键来操作 */,
      showBullets: true /* 是否使用点点点显示进度 */,
      showProgress: false /* 是否显示进度条 */,
      scrollToElement: true /* 是否滑动到高亮的区域 */,
      overlayOpacity: 0.6 /* 遮罩层的透明度 */,
      positionPrecedence: [
        `bottom`,
        `top`,
        `right`,
        `left`,
      ] /* 当位置选择自动的时候，位置排列的优先级 */,
      disableInteraction: false /* 是否禁止与元素的相互关联 */,
      hintPosition: "top-middle",
      steps: allSteps,
    });
    curIntro.oncomplete(() => {
      // 点击结束按钮后执行的事件
      console.log(`oncomplete`);
    });
    curIntro.onexit(() => {
      // 点击跳过按钮后执行的事件
      console.log(`onexit`);
    });
    curIntro.onchange(() => {
      // 点击下一步执行的事件
      console.log(`onchange`);
    });
    curIntro.start();
  };

  onMounted(() => {
    nextTick(() => {
      initPageIntro();
    });
  });
</script>

<style lang="scss" scoped></style>
